<template>
	<div>
		<Header></Header>
		<Banner :banner="advert"></Banner>
		<div id="nav">
			<nav class="clearfix">
				<div id="module" class="swiper-container">
					<div class="swiper-wrapper">
						<div v-for="i in TabCount" class="swiper-slide" style="padding-bottom: 30px;">
							<template v-for="(item,index) in module">
								<p v-if="index>=((i-1)*10)&&index<i*10" class="module">
									<img v-bind:src="FileUrl+item.icon" />
									<span>{{item.title}}</span>
								</p>
							</template>
						</div>
					</div>
					<div class="swiper-pagination" id="module-el"></div>
				</div>
				<div class="edmond clearfix">
					<span class="sprite-icon"></span>
					<div id="article" class="swiper-container">
						<div class="swiper-wrapper">
							<div v-for="n in article" class="swiper-slide">
								<p @click="articleInfo(n.id)">{{n.title}}</p>
							</div>
						</div>
					</div>
				</div>
			</nav>
		</div>
		<main>
			<div v-if="goods.length>0" class="floor clearfix">
				<div class="floor-container">
					<div class="title-wrap">
						<span class="sprite-icon secskill-icon fl"></span>
						<h2 class="secskill-title fl">热卖商品</h2>
						<a @click="$router.push('/Category');" href="javascript:void(0);">
							<div class="secskill-more fr">
								<span>查看更多</span>
								<span class="sprite-icon"></span>
							</div>
						</a>
					</div>
					<div class="secskill-content swiper-container-horizontal">
						<ul class="swiper-wrapper" style="height: 32vw;">
							<li v-for="g in goods" class="swiper-slide swiper-slide-active" style="width: 32vw;">
								<a @click="goodsInfo(g.id)" href="javascript:void(0);"><img v-bind:src="FileUrl+g.image" /></a>
							</li>

						</ul>
					</div>
				</div>
			</div>
			<!--描述：nav adv -->
			<div class="adv">
				<img src="../../assets/images/images/birthday.png">
			</div>

			<!--floor_3 start-->
			<div class="floor clearfix">
				<div class="floor-container">
					<div class="title-wrap">
						<span class="sprite-icon secskill-icon fl"></span>
						<h2 class="secskill-title fl">积分商城</h2>
						<router-link to="/GiftList">
							<div class="secskill-more fr">
								<span>查看更多</span>
								<span class="sprite-icon"></span>
							</div>
						</router-link>
					</div>
					<div class="floor-container center clearfix">
						<div class="floor_left" v-if="gift.length > 0">
							<a @click="GiftDetail(gift[0].id);" v-if="gift.length > 0" href="javascript:void(0);" class="line">
								<img v-bind:src="FileUrl+gift[0].img" onerror="this.src='http://abp.518show.cn/img/nopic.png'">
							</a>
							<a @click="GiftDetail(gift[1].id);" v-if="gift.length > 1" href="javascript:void(0);" class="line">
								<img v-bind:src="FileUrl+gift[1].img" onerror="this.src='http://abp.518show.cn/img/nopic.png'">
							</a>
						</div>
						<div class="foor_right" v-if="gift.length > 2">
							<a @click="GiftDetail(gift[2].id);" v-if="gift.length > 2" href="javascript:void(0);">
								<img v-bind:src="FileUrl+gift[2].img" onerror="this.src='http://abp.518show.cn/img/nopic.png'">
							</a>
							<a @click="GiftDetail(gift[3].id);" v-if="gift.length > 3" href="javascript:void(0);" class="addsty topline">
								<img v-bind:src="FileUrl+gift[3].img" onerror="this.src='http://abp.518show.cn/img/nopic.png'">
							</a>
						</div>
					</div>
				</div>
			</div>
			<!--floor_3 start-->

			<div v-if="stores.length>0" class="floor clearfix">
				<div class="floor-container">
					<div class="title-wrap">
						<span class="sprite-icon secskill-icon fl"></span>
						<h2 class="secskill-title fl">热门商家</h2>
						<a href="javascript:void(0);" @click="$router.push('/BusinessList')">
							<div class="secskill-more fr">
								<span>查看更多</span>
								<span class="sprite-icon"></span>
							</div>
						</a>
					</div>
					<ul class="ul-store">
						<li @click="$router.push('/BusinessDetail/'+s.id)" v-for="s in stores" class="store">
							<div class="img-div">
								<img v-bind:src="FileUrl+s.image" onerror="this.src='http://47.92.248.246:9012/img/nopic.png'" />
							</div>
							<div class="con">
								<p class='title'>{{s.name}}</p>
								<p class='ads'>{{s.address}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		
		</main>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from "@/components/common/_header.vue"
	import Banner from "@/components/common/_banaer.vue"
	import Footer from "@/components/common/_footer.vue"
	import Swiper from 'swiper'
	export default {
		data() {
			return {
				advert: [],
				module: [],
				article: [],
				goods: [],
				gift: [],
				TabCount: [],
				stores: [],
				FileUrl: config.FileUrl

			}
		},
		components: {
			Header,
			Banner,
			Footer
			// 			Module
		},
		watch: {
			module: function() {
				var l = (this.module.length / 10).toFixed(0);
				for (var i = 1; i <= l; i++) {
					this.TabCount.push(i);
				}
				if (l > 1) {
					//alert(this.TabCount);

				}
			}
		},
		beforeCreate: function() {
			//组件实例刚刚被创建，但组件属性尚未
			//alert(config.ApiUrl);
			this.$layer.loading('加载中...');
			let self = this;
			this.$http.post(config.ApiUrl + 'advert/SelectAll', {}, {
				emulateJSON: true
			}).then(function(res) {

				this.advert = res.body.data;
			}, function(res) {
				console.log('失败')
			});
			this.$http.get(config.ApiUrl + '/advert/SystemOperate').then(
				response => {
					this.module = response.body.data;
				}
			);
			this.$http.get(config.ApiUrl + '/article/SelectPage').then(
				response => {
					this.article = response.body.data;
				}
			);
			this.$http.get(config.ApiUrl + 'product/List').then(
				response => {
					this.goods = response.body.data;
				}
			);
			this.$http.get(config.ApiUrl + 'gift/List').then(
				response => {
					this.gift = response.body.data;
				}
			);
			this.$http.get(config.ApiUrl + 'shop/ChainList', {}, {
				emulateJSON: true
			}).then(function(res) {
			
				this.stores = res.body.data;
			}, function(res) {
				console.log('失败')
			});
		},

		mounted: function() {

		},
		updated: function() {

			new Swiper('#article', {
				loop: true,
				speed: 500,
				autoplay: true,
				noSwiper: false,
				autoplayDisableOnInteraction: false, //用户操作完轮播图之后，继续轮播
				direction: "vertical"
			});

			new Swiper('#module', {
				loop: false,
				autoplay: false,
				autoplayDisableOnInteraction: false, //用户操作完轮播图之后，继续轮播
				// 如果需要分页器
				pagination: {
					el: '#module-el',
				}
			});
			this.$layer.close();
		},
		methods: {
			articleInfo: function(id) {
				this.$router.push('/ArticleInfo/' + id);
			},
			goodsInfo: function(id) {
				this.$router.push('/GoodsDetail/' + id);
			},
			GiftDetail: function(id) {
				this.$router.push('/GiftDetail/' + id);
			},

		}

	}
</script>

<style>
	@import "../../assets/css/swiper.min.css";

	#module .swiper-slide {
		display: flex;

		flex-flow: wrap;
	}

	#module-el {
		margin-top: 10px;
	}

	.module {
		display: inline-block;
		width: 20%;
		text-align: center;
	}

	.module span {
		display: block;
		margin: 5px 0 8px 0;
	}

	.module img {
		width: 50% !important;
		display: inline-block;
	}

	.ul-store li {
		border-bottom: 1px solid #F2F2F2;
		border-top: 1px solid #F2F2F2;
		padding: 10px;
		display: flex;
	}

	.ul-store li .img-div {
		flex: 1;
	}

	.ul-store li .con {
		flex: 2;
		padding-left: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.ul-store li .con .title {
		font-size: 1.6rem;
		color: #333;
		flex: 1;
	}

	.ul-store li .con .ads {
		font-size: 1.4rem;
		color: #666666;
		flex: 1;
	}
</style>
